<template>
  <div class="guestmachinebind">
    <h3>游客仅绑定游客机</h3>
    <hr />
    <el-form :inline="true" :model="mbindData" class="demo-form-inline">
      <el-form-item label="游客编号">
        <el-input
          v-model.number="mbindData.userNumber"
          placeholder="请输入内容"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="bindFun">绑定</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="unbindFun">解除绑定</el-button>
      </el-form-item>
    </el-form>

    <h3>服务台人工分配导游</h3>
    <hr />
    <el-form :inline="true" :model="distributionData" class="demo-form-inline">
      <el-form-item label="导游工号">
        <el-select
          v-model="distributionData.userNumber"
          clearable
          placeholder="请选择导游工号"
        >
          <el-option
            v-for="item in guidenumberArray"
            :key="item.userNumber"
            :label="item.userNumber"
            :value="item.userNumber"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="backstagebindFun">绑定</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="visitorsListArr"
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="tourNumber" label="导游机编号" width="120">
      </el-table-column>
      <el-table-column prop="visitorNumber" label="游客机编号" width="120">
      </el-table-column>
      <el-table-column prop="visitorPerson" label="游客机责任人" width="120">
      </el-table-column>
      <el-table-column prop="visitorStatus" width="200">
        <template slot="header" slot-scope="scope">
          <el-select
            v-model="value"
            clearable
            placeholder="请选择游客机状态"
            size="mini"
            @change="VisitorByStatusFun(value)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>

        <template slot-scope="scope">
          <span :class="scope.row.visitorStatus | formateColor"
            >{{ scope.row.visitorStatus | formateStatus }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="visitorTime" label="游客机录入时间" width="250">
      </el-table-column>
      <el-table-column prop="visitorUser" label="游客编号" width="223">
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="bindtour(scope.row.visitorNumber)"
            >绑定导游</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框开始 -->
    <el-dialog
      title="游客自助绑定导游机"
      :visible.sync="dialogFormVisible"
      width="40%"
    >
      <el-form
        :inline="true"
        :model="mbindData"
        ref="mbindData"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="导游工号" size="small">
          <el-select
            v-model="mbindData.guideNumber"
            clearable
            placeholder="请选择导游工号"
          >
            <el-option
              v-for="item in guidenumberArray"
              :key="item.userNumber"
              :label="item.userNumber"
              :value="item.userNumber"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="bindtourEve">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
let self = null;

import {
  ordersbind,
  ordersunbind,
  selfbindingguide,
  backstagedistribution,
  selVisitorMess,
  getguidenumber,
  VisitorByStatus,
} from "@network/api/order.js";
export default {
  data() {
    return {
      mbindData: {
        userNumber: "",
        visitorNumber: "",
        // 导游工号
        guideNumber: "",
        // 需要绑定导游的游客机编号
        vNumber: "",
      },
      distributionData: {
        userNumber: "",
        visitorNumber: [],
      },
      visitorsListArr: [],
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formateStatusArr: [
        {
          code: 1,
          name: "使用中",
          color: "status-green",
        },
        {
          code: 2,
          name: "闲置",
          color: "status-yellow",
        },
        {
          code: 3,
          name: "遗失",
          color: "status-red",
        },
        {
          code: 4,
          name: "维修",
          color: "status-default",
        },
      ],
      guidenumberArray: [],
      SelectDataArr: [],
      options: [
        {
          value: 1,
          label: "使用中",
        },
        {
          value: 2,
          label: "闲置",
        },
        {
          value: 3,
          label: "遗失",
        },
        {
          value: 4,
          label: "维修",
        },
      ],
      value: "",
      totals: 0,
      payMess: "",
    };
  },
  methods: {
    async bindFun() {
      let { userNumber } = this.mbindData;
      let resbind = await ordersbind(userNumber);
      let { code, data, message } = resbind.data;
      if (code && code == 200) {
        this.$message({
          message: `游客机编号${data.visitorNumber},${message}`,
          type: "success",
        });
        this.selVisitorMessFun();
      } else {
        this.$message({
          message: message,
          type: "warning",
        });
      }
    },
    async unbindFun() {
      let { userNumber } = this.mbindData;
      let resunbind = await ordersunbind(userNumber);
      let { code, message, data } = resunbind.data;
      console.log("resunbind", resunbind);
      if (code) {
        this.$message({
          message: message,
          type: "success",
        });

        this.$notify({
          title: "订单详情",
          message: `${data.payMess}`,
          type: 'success'
        });

        this.selVisitorMessFun();
      } else {
        this.$message({
          message: message,
          type: "error",
        });
      }
    },
    bindtour(visitorNumber) {
      this.dialogFormVisible = true;
      console.log("visitorNumber", visitorNumber);
      this.mbindData.vNumber = visitorNumber;
    },

    async bindtourEve() {
      let { vNumber, guideNumber } = this.mbindData;
      let resselfbindingguide = await selfbindingguide(vNumber, guideNumber);
      //   console.log("self", resselfbindingguide);
      let { code, message } = resselfbindingguide.data;
      if (code && code == 200) {
        this.$message({
          message: message,
          type: "success",
        });
        this.dialogFormVisible = false;
        this.selVisitorMessFun();
      } else {
        this.$message({
          message: message,
          type: "error",
        });
      }
    },
    async backstagebindFun() {
      let resbackstagedistribution = await backstagedistribution(
        this.distributionData
      );
      console.log("服务台", resbackstagedistribution);
      let { code, message } = resbackstagedistribution.data;
      if (code && code == 200) {
        this.$message({
          message: message,
          type: "success",
        });
        this.selVisitorMessFun();
      } else {
        this.$message({
          message: message,
          type: "warning",
        });
      }
    },
    async selVisitorMessFun() {
      let resselVisitorMess = await selVisitorMess(
        this.currentPage,
        this.pageSize
      );
      console.log("resselVisitorMess", resselVisitorMess);
      this.visitorsListArr = resselVisitorMess.data.data.visitorsList;
      this.totals = resselVisitorMess.data.data.total;
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.selVisitorMessFun();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selVisitorMessFun();
    },
    handleSelectionChange(val) {
      console.log("v", val);

      val.forEach((item) => {
        console.log("a", item.visitorNumber);
        this.distributionData.visitorNumber.push(item.visitorNumber);
        this.distributionData.visitorNumber = [
          ...new Set(this.distributionData.visitorNumber),
        ];
      });
    },
    async getguidenumberFun() {
      let resgetguidenumber = await getguidenumber();
      console.log(
        "resgetguidenumber",
        resgetguidenumber.data.data.userBindingTourMessList
      );
      this.guidenumberArray =
        resgetguidenumber.data.data.userBindingTourMessList;
    },
    async VisitorByStatusFun(selval) {
      console.log("selval", selval);

      let resVisitorByStatus = await VisitorByStatus(selval);
      console.log("resVisitorByStatus", resVisitorByStatus);
      this.visitorsListArr = resVisitorByStatus.data.data.visitorByStautsList;
    },
  },
  filters: {
    // 将数字转换为文字
    formateStatus(val) {
      console.log("状态", val);
      let newval = null;
      self.formateStatusArr.forEach((item) => {
        if (item.code == val) {
          newval = item.name;
        }
      });
      return newval;
    },
    // 颜色过滤
    formateColor(val) {
      let colorStyle = null;
      self.formateStatusArr.forEach((item) => {
        if (item.code == val) {
          colorStyle = item.color;
        }
      });
      return colorStyle;
    },
  },
  created() {
    this.selVisitorMessFun();
    // 将this赋值给全局变量
    self = this;
    this.getguidenumberFun();
  },
};
</script>

<style>
.guestmachinebind {
  background-color: #fff;
  padding: 40px 20px;
}
.demo-form-inline {
  margin-top: 30px;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.status-red {
  color: red;
}
.status-yellow {
  color: orange;
}
.status-green {
  color: green;
}
.status-default {
  color: #000;
}
</style>